<!DOCTYPE html>

<div ng-controller="OrderController  as orderCtrl" data-ng-init="init()">
<h1>
	<span class="label label-danger">Your Orders</span>
</h1>
<!-- <div class="caption col-sm-12 text-right">
  <a class="btn btn-warning" role="button" ng-click="orderCtrl.refresh()" >Refresh</a>
 </div> -->
<div class="well well-lg">
     <div class="alert alert-success" ng-show="showSuccessMessage">
              <strong>Success! Your order is placed</strong> 
     </div>
      <div class="alert alert-danger" ng-show="showFailMessage">
              <strong>Product you chosen is out of stock . Please reset cart with available products</strong>
     </div>
	<div class="container-fluid">
		<div class="col-sm-8">
			<ul class="nav nav-pills">
				<li class="active"><a data-toggle="pill" href="/order/#new"><strong>New</strong></a></li>
				<li><a data-toggle="pill" href="/order/#inprogress"><strong>In
						progress</strong></a></li>
				<li><a data-toggle="pill" href="/order/#completed"><strong>Completed</strong></a></li>
				<li><a data-toggle="pill" href="/order/#cancelled"><strong>Cancelled</strong></a></li>
				<li><a data-toggle="pill" href="/order/#failed"><strong>Failed</strong></a></li>
			</ul>

			<div class="tab-content">
				<div id="new" class="tab-pane fade in active">
					<div class="panel panel-info">
						<div class="panel-body">
							<table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in myCart.lineItems">
										<td>
										<a href="" ng-click="showProductDetails(lineItem.id)"><img ng-src="{{productImgs[lineItem.id]}}"  err-src="/img/default.png"  height="75px" width="100px"/>
										{{lineItem.name}}</a></td>
										<td>$<span>{{lineItem.price}}</span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
							<div class="caption col-sm-12 text-right">
								<a class="btn btn-warning" role="button" ng-click="orderCtrl.addNewOrder()">Proceeds
									to checkout Order</a>
							</div>
						</div>
					</div>

				</div>
				<div id="inprogress" class="tab-pane fade">
				  <div class="panel panel-info">
						<div class="panel-body" ng-repeat="order in inProgressOrders">
								<div class="panel panel-default">
							      <div class="panel-heading">Order Id  <strong># {{order.orderId}} </strong> &nbsp;&nbsp;&nbsp;
							        Creation Date <strong># {{order.creationDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>
							        &nbsp;&nbsp;&nbsp; <span style="color: red">Not shipped</span>
							        </div>							      
							      <div class="panel-body" >
							        <table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in order.lineItems" >
										 <td>
										   <a href="" ng-click="showProductDetails(lineItem.productId)"> <img ng-src="{{productImgs[lineItem.productId]}}"  err-src="/img/default.png"  height="75px" width="100px"/>
										   {{productInfo[lineItem.productId]}}</a>
										 </td>
										<td>$<span>{{lineItem.price}}  </span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
							  <div class="caption col-sm-12 text-right">
								<a class="btn btn-warning" role="button" ng-click="orderCtrl.cancelOrder(order.orderId)">Cancel order</a>
							</div>
			    	      </div>
					    </div>
						</div>
						
						<div class="panel-body" ng-repeat="order in shippedOrders">
								<div class="panel panel-default">
							      <div class="panel-heading">Order Id  <strong># {{order.orderId}} </strong> &nbsp;&nbsp;&nbsp;
							        Creation Date <strong># {{order.creationDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong> &nbsp;&nbsp;&nbsp;
							        Shipped Date <strong># {{order.shippedDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>
							        </div>							      
							      <div class="panel-body" >
							        <table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in order.lineItems">
										<td>										
										<a href="" ng-click="showProductDetails(lineItem.productId)"><img ng-src="{{productImgs[lineItem.productId]}}"  err-src="/img/default.png"  height="75px" width="100px"/>
										{{productInfo[lineItem.productId]}}</a></td>
										<td>$<span>{{lineItem.price}}</span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
							 
			    	      </div>
					    </div>
						</div>
					</div> 
				
				</div>
				<div id="completed" class="tab-pane fade">
				<div class="panel panel-info">
					<div class="panel-body" ng-repeat="order in completedOrders">
								<div class="panel panel-default">
							      <div class="panel-heading">Order Id  <strong># {{order.orderId}} </strong> &nbsp;&nbsp;&nbsp;
							        Creation Date <strong># {{order.creationDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong> &nbsp;&nbsp;&nbsp;
							        Shipped Date <strong># {{order.shippedDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>
							        Delivered Date <strong># {{order.deliveredDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>
							        </div>							      
							      <div class="panel-body" >
							        <table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in order.lineItems">
										<td><a href="" ng-click="showProductDetails(lineItem.productId)"><img ng-src="{{productImgs[lineItem.productId]}}"  err-src="/img/default.png'"  height="75px" width="100px"/>
										{{productInfo[lineItem.productId]}}</a></td>
										<td>$<span>{{lineItem.price}}</span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
							 
			    	      </div>
					    </div>
						</div>
					</div>	
				</div>
				<div id="cancelled" class="tab-pane fade">
				    <div class="panel panel-info">
						<div class="panel-body" ng-repeat="order in cancelledOrders">
								<div class="panel panel-default">
							      <div class="panel-heading">Order Id  <strong># {{order.orderId}} </strong> &nbsp;&nbsp;&nbsp;
							        Creation Date <strong># {{order.creationDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>&nbsp;&nbsp;&nbsp;
							        Cancelled Date <strong># {{order.cancelledDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>
							        </div>							      
							      <div class="panel-body" >
							        <table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in order.lineItems">
										<td><a href="" ng-click="showProductDetails(lineItem.productId)"><img ng-src="{{productImgs[lineItem.productId]}}"  err-src="/img/default.png"  height="75px" width="100px"/>
										{{productInfo[lineItem.productId]}}</a></td>
										<td>$<span>{{lineItem.price}}</span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
			    	      </div>
					    </div>
						</div>
					</div> 
				</div>
				
				
				
				<div id="failed" class="tab-pane fade">
				
				  <div class="panel panel-info">
						<div class="panel-body" ng-repeat="order in failedOrders">
								<div class="panel panel-default">
							      <div class="panel-heading">Order Id  <strong># {{order.orderId}} </strong> &nbsp;&nbsp;&nbsp;
							        Creation Date <strong># {{order.creationDate | date:"MM/dd/yyyy 'at' h:mma"}} </strong>&nbsp;&nbsp;&nbsp;
							        <div class="alert alert-danger" role="alert">
                                              {{order. deliveryFailReason}}  
                                   </div>
							       </div>							      
							      <div class="panel-body" >
							        <table class="table table-striped table table-sm">
								<thead>
									<tr>
										<th>Product</th>
										<th>Price</th>
										<th>Quantity</th>
										<th>Total Price</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="lineItem in order.lineItems">
										<td><a href="" ng-click="showProductDetails(lineItem.productId)"><img ng-src="{{productImgs[lineItem.productId]}}"  err-src="/img/default.png"  height="75px" width="100px"/>
										{{productInfo[lineItem.productId]}}</a></td>
										<td>$<span>{{lineItem.price}}</span></td>
										<td>{{lineItem.quantity}}</td>
										<td>$<span>{{lineItem.quantity * lineItem.price }}</span></td>
									</tr>
								</tbody>

							</table>
			    	      </div>
					    </div>
						</div>
					</div> 
				
				
				</div>

			</div>
		</div>








		<div class="col-sm-4">
			<div class="row">

				<b>Billing Address</b>
				<address>
					<strong>{{user.billingAddress.appartment}}</strong><br> {{user.billingAddress.street}}, {{user.billingAddress.province}}
					<br> {{user.billingAddress.state}}, {{user.billingAddress.country}} ,{{user.billingAddress.pin}}<br> <abbr title="Phone">P:</abbr>
					{{user.phone}}
				</address>

				<address>
					<strong>{{user.firstName}} {{user.lastName}}</strong><br> <a href="mailto:#">{{user.email}}</a>
				</address>

			</div>

			<div class="row">

				<b>Shipping Address</b>
				<address>
					<strong>{{user.shippingAddress.appartment}}</strong><br> {{user.shippingAddress.street}}, {{user.shippingAddress.province}}
					<br> {{user.shippingAddress.state}}, {{user.shippingAddress.country}} ,{{user.shippingAddress.pin}}<br> <abbr title="Phone">P:</abbr>
						{{user.phone}}
				</address>


			</div>
		</div>

	</div>
</div>
</div>
